<script setup lang="ts">
import { reactive, ref, shallowRef } from 'vue';
import Draggable from "vuedraggable";
import { tmpList } from '../tmpList';
import { useLayoutStore } from '@/stores/useLayout';

const layoutComponents = reactive([])

const layoutStore = useLayoutStore()

const emit = defineEmits(["copy", 'remove'])
const tmpMap: any = {};
tmpList.forEach((item: any) => {
  tmpMap[item.__name] = item
})

const commComponents = shallowRef(tmpMap)

const props = defineProps({
  view: {
    type: Object,
    default: {},
  }
})

const getItemStyle = (item) => {
  const obj: any = {
    flex: item.style.flex || 1,
    flexDirection: item.direction
  };
  if (item.style.height) {
    obj.height = item.style.height
  }
  console.log("----------start")
  console.log(item, obj)
  console.log("----------obj")
  const temp = { ...item.style, ...obj };
  console.log(temp)
  console.log("----------over")
  return temp
}

const getListStyle = () => {
  const obj: any = {
    flexDirection: props.view.direction
  }
  if (layoutStore.previewShow) {
    obj.border = "none";
    obj.padding = 0;
  }
  return { ...props.view.style, ...obj };
}

const onChoose = () => {
  console.log("item", props.view)
}
</script>

<script lang="ts">
export default {
  name: "task"
};
</script>

<template>

  <div class="list preview" @click.stop="onChoose()" :style="getItemStyle(view)">
    <!-- <div class="item" :style="getItemStyle(view)"> -->
      <template v-if="view.type == 'layout'">
      <Task v-for="item in view.tasks" :key="item.id" :view="item"></Task>
    </template>
    <template v-else>
      <component :is="commComponents[view.name]" :title="view.data.title" :desc="view.data.desc" :img="view.data.img"
        :style="view.style" :titleStyle="view.titleStyle" :descStyle="view.descStyle"></component>
    </template>
    <!-- </div> -->
    
  </div>

</template>

<style lang="less" scoped>
.list {
  display: flex;
  gap: 20px;
  // padding: 10px;
  // background: #f9f9f9;
  min-height: 100px;
  // border: dashed 1px #82cff2;
  flex: 1 0 0;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;

  &.preview {
    margin: 0
  }
}

.item {
  // background: #f0f0f0;
  cursor: default;
  width: 100%;
  height: 100%;
  overflow: hidden;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  position: relative;

  &.preview {
    border: none !important;

    .titles {
      display: none;
    }
  }
}

.choose {
  border: solid 2px #ff0000;
}

.ico {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.titles {
  display: flex;
  align-items: center;
  padding: 2px 8px;

  .i-name {
    // position: absolute;
    // left: 0;
    // top: 0;
    padding: 5px 5px 0;
    font-size: 12px;
    margin-right: auto;
    color: #999;
  }

  .i-btn {
    width: 16px;
    height: 16px;
    object-fit: contain;
    background: #fff;
    // border-radius: 50%;
    margin-left: 10px;
    cursor: pointer;
  }
}
</style>
